<template>
	<view class="content">
		<image class="logo" src="./image/logo.png"></image>
		<view class="body">
			<h1 style="width: 100%; text-align: start; margin-bottom: 50rpx;">注册</h1>
			<text>手机号</text>
			<el-input v-model="account" style="margin-bottom:50rpx ;" placeholder="输入手机号"></el-input>
			<text>密码</text>
			<el-input v-model="password" style="margin-bottom:50rpx ;" type="password" placeholder="输入密码"></el-input>
			<text>验证码</text>
			<view style="display: flex; flex-direction: row; margin-bottom: 50rpx;">
				<el-input v-model="code"  type="password" placeholder="输入验证码" style="margin-right: 20rpx;"></el-input>
				<el-button type="primary" @click="getCode">获取验证码</el-button>
			</view>
			
			<el-button @click="register" type="primary">注册</el-button>
			<view style="display: flex; flex-direction: row;">
			<h6 style="width: 100%; text-align: center; margin-bottom: 50rpx;" @click="goLogin">已有账号？去登录</h6>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from 'vue';
	import axiosInstance from '@/Config/axiosConfig'
	import globalStore from '@/store/GlobalStore';
	import Emessage from '@/Utils/Message';
	//手机号
	const account=ref("");
	//密码
	const password=ref("");
	//验证码
	const code=ref("");
//登录
const register=async()=>{
	if(code.value==""||null==code.value){
		Emessage("未填写验证码","error");
		return;
	}
	try{
	const response=await axiosInstance.post('/user/register',{
		tel:account.value,
		password:password.value,
		code:code.value
	
	})
	if(response.data.code==200){
		Emessage(response.data.message,"success");
		account.value=""
		password.value=""
		uni.navigateBack({delta:1});
	}else{
		Emessage(response.data.message,"error")
	} 
	}catch(e){
		Emessage(response.data.message,"error")
	}
}
//注册
const goLogin=async()=>{
	uni.navigateBack({
		delta:1
	})
}
//获取验证码
const getCode=async()=>{
	const response=await axiosInstance.get('/user/getCode?tel='+account.value)
	if(response.data.code==200)Emessage(response.data.message,"success");
	else Emessage(response.data.message);
}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
	}

	.logo {
		height: 400rpx;
		width: 100%;
		margin-bottom: 50rpx;
		
	}

	.body {
		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 70%;
		height: 70%;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
